<template>
  <div class="todoWp">
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input
          class="new-todo"
          autofocus
          autocomplete="off"
          placeholder="What needs to be done?"
          v-model="input"
          @keydown.enter="addTodoEnter"
        />
      </header>
      <List />
      <Footer />
    </section>
    <footer class="info">
      <p>Double-click to edit a todo</p>
      <p>Written by <a href="http://evanyou.me">Evan You</a></p>
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>
  </div>
</template>

<script>
import Footer from "./footer";
import List from "./list";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      input: "",
    };
  },
  methods: {
    ...mapActions("todo", ["addTodoEnterFn"]),
    async addTodoEnter() {
      if (!this.input.trim()) return;
      await this.addTodoEnterFn({
        title: this.input.trim(),
        isCompleted: false,
      });

      this.input = "";
    },
  },
  components: {
    Footer,
    List,
  },
};
</script>

<style scoped  src="../todo.css">
</style>
<style>
.todoWp {
  width: 80%;
  height: auto;
  margin: 100px auto;
}
</style>